<template>
  <div class="page">
    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/guide/introduce' }"
        >入会指南</el-breadcrumb-item
      >
      <el-breadcrumb-item :to="{ path: '/guide/vip' }"
        >会员名录</el-breadcrumb-item
      >
      <el-breadcrumb-item>会员名录详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="person">
      <div>
        <img :src="$store.state.baseUrl + details.memberAvatar" alt="" />
      </div>
      <div>
        <p>
          {{ details.memberName }} <span></span> {{ details.associationJob }}
        </p>
        <p>所属企业：{{ details.companyName }}</p>
      </div>
    </div>
    <div class="content">
      <quill-editor
        disabled
        v-model="details.memberIntroduction"
        class="ql-editor ql-box"
      />
    </div>
  </div>
</template>

<script>
import api from "@/api/modules/home.js";
export default {
  name: "MemberDetail",
  data() {
    return {
      details: "",
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      api.getMemberDetail({ memberId: this.$route.params.id }).then((res) => {
        this.details = res.data;
      });
    },
  },
};
</script>
<style lang="less" scoped>
.page {
  width: 75%;
  margin: 0 auto;
  .breadcrumb {
    box-sizing: border-box;
    height: 84px;
    line-height: 84px;
    padding-left: 16px;
  }
  .person {
    display: flex;
    margin-bottom: 30px;
    img {
      width: 120px;
      margin-right: 30px;
    }
    p {
      padding-bottom: 15px;
    }
    span {
      margin-right: 30px;
    }
  }
  .content {
    text-align: center;
    border: 1px solid #e8f2fd;
    // padding: 64px 0;
    margin-bottom: 64px;
    p {
      text-align: left;
    }
    .detail {
      padding: 64px;
      h5 {
        font-size: 28px;
        text-align: left;
        border-bottom: 1px solid #e8f2fd;
        padding-bottom: 20px;
        margin: 0;
      }
    }
  }
}
</style>

